<template>
	<view>
		<div class="card">
		    <div class="text-container">
				<view>
					 <h3>务实建筑施工安全教育 建筑安全 生产第一防线</h3>
				</view>
				<view>
					<p>4小时前</p>
				</view>
		    </div>
			<div class="image-container">
			    <img style="width: 200rpx;height: 200rpx" src="../../static/images/banner/banner01.jpg" mode="widthFix" alt="Construction" />
			</div>
		</div>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				
			}
		},
		onLoad() {
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.card {
	    display: flex;
	    border: 1px solid #ddd;
	    border-radius: 8px;
	    overflow: hidden;
		height:200rpx;
	}
	
	.image-container {
	    flex: 1;
	}
	
	.image-container img {
	    width: 100%;
	    height: auto;
	    border-radius: 20rpx 20rpx; /* 圆角效果 */
	}
	
	.text-container {
	    flex: 2;
	    padding: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
	}
	
	.text-container h3 {
	    margin: 0;
	    font-size: 30rpx;
	}
	
	.text-container p {
	    color: #888;
	    font-size: 14px;
	}
</style>